<template>
<highlightjs language="JavaScript" highlightAuto top :code="code" />
</template>
<script>
export default {
  setup () {
    const code = `
    import 'ol/ol.css'
    import { Map, View } from 'ol'
    import Tile from 'ol/layer/Tile'
    import OSM from 'ol/source/OSM'

    const map1 = ref(null)

    const init = () => {
      map1.value = new Map({
        layers: [
          new Tile({
            source: new OSM() // 图层数据源
          })
        ],
        view: new View({
          // 地图视图
          projection: 'EPSG:4326', // 坐标系，有EPSG:4326和EPSG:3857
          center: [116.41400, 39.91500], // 北京坐标
          zoom: 8
        })
      })
      map1.value.setTarget('map1')
    }

    const tabContainer = () => {
      // 获取当前地图容器，并进行判断
      const target = map1.value.getTarget() === 'map1' ? 'map2' : 'map1'

      // 重新设置地图容器
      map1.value.setTarget(target)
    }
    `
    return {
      code
    }
  }
}
</script>
